<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #father {
      width: 400px;
      height: 400px;
      border: 1px solid #000;
      display: flex;
    }

    #c {
      width: 200px;
      height: 200px;
      border: 1px solid #000;
      margin: auto;
    }
  </style>
</head>

<body>
  <div id="father">
    <div id="c"></div>
  </div>
  <script>
    var father = document.getElementById("father");
    console.log("father", );
    // 冒泡排序  小到大  每次冒最大
    var arr = [8, 1, 17, 2, 34, 2, 23, 33, 22, 11, 9, 6];
    function quick_sort(arr, from, to) {
      var i = from; //哨兵i
      var j = to; //哨兵j
      var key = arr[from]; //标准值
      if (from >= to) { //如果数组只有一个元素
        return;
      }
      while (i < j) {
        while (arr[j] > key && i < j) { //从右边向左找第一个比key小的数，找到或者两个哨兵相碰，跳出循环
          j--;
        }
        while (arr[i] <= key && i < j) {  //从左边向右找第一个比key大的数，找到或者两个哨兵相碰，跳出循环,这里的=号保证在本轮循环结束前，key的位置不变，否则的话跳出循环，交换i和from的位置的时候，from位置的上元素有可能不是key
          i++;
        }
        /**
          代码执行道这里，1、两个哨兵到找到了目标值。2、j哨兵找到了目标值。3、两个哨兵都没找到(key是当前数组最小值)
        **/
        if (i < j) { //交换两个元素的位置
          var temp = arr[i];
          arr[i] = arr[j];
          arr[j] = temp;

        }
      }
      arr[from] = arr[i] //
      arr[i] = key;
      quick_sort(arr, from, i - 1);
      quick_sort(arr, i + 1, to);
    }

    console.log(arr);
    quick_sort(arr, 0, arr.length - 1);
    console.log(arr);

  </script>
</body>

</html>